<link rel="stylesheet" href="./nepadmin/css/formSelects.css" media="all">
<style>
    .xm-select-dl{
        top:unset !important;
    }
</style>
<div class="layui-fluid" id="VIEW-banner-table" lay-title="banner">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-body nepadmin-pad-l10 nepadmin-pad-r10">
                    <div class="layui-btn-container">
                        <div class="layui-btn layui-btn-sm table-action" data-type='add' style="margin-bottom: 0;">添加banner</div>
                        <!--<button type="button" class="layui-btn" lay-event="upload" id="test1">上传图片</button>-->
                    </div>
                    <table id="banner-table" lay-filter="banner-table"></table>
                </div>
            </div>
        </div>

        </div>
    </div>
</div>
<!--添加面板-->
<div id="add_banner_bd" hidden>
    <div style="padding: 10px;">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图片</label>
                <div class="layui-input-block">
                    <!--<input type="password" name="image" required lay-verify="required" autocomplete="off" class="layui-input">-->
                    <button type="button" class="layui-btn" lay-event="upload" id="test1">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">发布时间</label>
                <div class="layui-input-block">
                    <input type="text" name="publishtime"    placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">结束时间</label>
                <div class="layui-input-block">
                    <input type="text" name="endtime"  required  lay-verify="required"  placeholder="请选择结束时间" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">跳转url</label>
                <div class="layui-input-block">
                    <input type="text" name="url" placeholder="请填写跳转url" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="text" name="switch" placeholder="请填写switch" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="add-user">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
</div>

<!-- 用户列表bar tool -->
<script type="text/html" id="banner_bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use(['admin', 'table', 'form', 'dropdown', 'jquery', 'upload','formSelects'], function (admin, table, form, dropdown, $) {
        var view = $('#VIEW-banner-table');
        var upload = layui.upload;

        var tableFilter = 'banner-table';
        upload.render({
            elem: '#test1'
            ,url: '/api/upload/' //必填项
            ,method: ''  //可选项。HTTP类型，默认post
            ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
        });
        upload.on({
            elem: '#test1'
            ,url: '/api/upload/' //必填项
            ,method: ''  //可选项。HTTP类型，默认post
            ,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
        });
        admin.renderTable({
            elem: '[lay-filter="' + tableFilter + '"]',
            id: 'banner-table',
            api: 'getAllBanner',
            page: true,
            cols: [[
                { title: 'id', field: 'id', fixed: true},
                { title: '标题', field: 'title', fixed: true},
                //{ title: '图片预览', field: 'image', fixed: true,width: 80,templet:'<div><img src="{{ d.image }}" ><div>'},
                { title: '发布时间', field: 'publishtime', fixed: true},
                { title: '结束时间', field: 'endtime', fixed: true},
                { title: 'url', field: 'url', fixed: true},
                { title: '开关', field: 'switch', fixed: true},
            ]]
        });

        // 顶部按钮
        $('body').on('click', '.table-action', function () {
            let type = $(this).data('type');

            switch (type) {
                case 'add':
                    layer.open({
                        type: 2,
                        content: '/#/banner/add',
                        title: '添加用户',
                        area: ['70%', '70%'],
                    });
                    break;
            }
        });
        //监听添加banner
        form.on('submit(add-user)', function (data) {
            admin.post({
                api: 'addUser',
                data: data.field,
                success:function (res) {
                    layer.msg('添加成功', {
                        icon:1,
                        success :function (index, layero) {
                            setTimeout(function(){
                                layer.closeAll();
                                layui.view.tab.refresh();
                            },800);
                        }
                    });
                }
            });
        });
        //监听工具条
        table.on('tool(banner-table)', function(obj){
            let data = obj.data;
            let layEvent = obj.event;
            let tr = obj.tr;

            layer.msg('还没有，(ಥ﹏ಥ)~' , {
                icon: 3
            });

            if(layEvent === 'detail'){
                //do somehing
            } else if(layEvent === 'del'){

            } else if(layEvent === 'edit'){

            }
        });

    })
</script>